<template>
    <div class="air">
            <el-row :gutter="21" class="paddCol">
              <el-col :span="8" class="paddCol">
                <el-card class="box-card">
                  <div class="leftDiv">
                    <div class="cleanBoxPan">
                      <p style="color:#49d3fc">{{this.data.unit[34].value.toFixed(0)}}</p>
                      <img src="../../assets/120a/pan1.png" alt="" v-if="this.data.unit[4].value < this.data.unit[34].value-5">
                      <img src="../../assets/120a/pan2.png" alt="" v-if="(this.data.unit[4].value > this.data.unit[34].value -5) && (this.data.unit[4].value < this.data.unit[34].value +5)">
                      <img src="../../assets/120a/pan3.png" alt="" v-if="this.data.unit[4].value > this.data.unit[34].value+5">
                      <p class="cleanBoxPan_data2" >{{this.data.unit[4].value.toFixed(0)}}</p>
                      <p class="cleanBoxPan_tit2">
                        <span >{{this.data.unit[4].name}}({{this.data.unit[4].flag}})</span>
                      </p>
                    </div>
                    <div class="cleanBoxData_left">
                      <p class="cleanBoxData_tit">{{this.data.unit[2].name}}:</p>
                      <p class="cleanBoxData_data">{{this.data.unit[2].value.toFixed(1)}}</p>
                      <p class="cleanBoxData_flag">{{this.data.unit[2].flag}}</p>
                    </div>
                    <div class="cleanBoxData_left">
                      <p class="cleanBoxData_tit">{{this.data.unit[3].name}}:</p>
                      <p class="cleanBoxData_data">{{this.data.unit[3].value.toFixed(1)}}</p>
                      <p class="cleanBoxData_flag">{{this.data.unit[3].flag}}</p>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8" class="paddCol">
                <el-card class="box-card centerH">
                  <div class="shijian">
                    <!-- {{this.data.unit[17].value}}<span class="timeG">-</span>{{this.data.unit[18].value}}<span class="timeG">-</span>{{this.data.unit[19].value}}
                    &ensp;{{this.data.unit[20].value}}<span style="margin:0px 3px">:</span>{{this.data.unit[21].value}}  -->
                  </div>
                  <div style="clear:both"></div>
                  <div class="boxImg">
                    <img src="../../assets/120a/120a.png" alt="" >
                  </div>
                  <div class="humi_center_div">
                    <div class="humi_center_lw">
                        <svg class="icon" aria-hidden="true" style="float:left;color: #ff0000;" v-if="this.data.unit[6].value >= 2000">
                            <use xlink:href="#icon-lvwang"></use>
                        </svg>
                        <svg class="icon" aria-hidden="true" style="float:left;" v-if="this.data.unit[6].value < 2000">
                            <use xlink:href="#icon-lvwang"></use>
                        </svg>
                    </div>
                    <div class="humi_center_tishi">
                        <span class="humi_tishi" v-if="this.switch == 0">已关机</span>
                        <span class="humi_tishi" v-if="this.switch == 1 && this.moshi == 24">灭菌已开启</span>
                        <span class="humi_tishi" v-if="this.switch == 1 && this.moshi == 20">除湿已开启</span>
                        <span class="humi_tishi" v-if="this.switch == 1 && this.moshi == 18">加湿已开启</span>
                        <span class="humi_tishi" v-if="this.switch == 1 && this.moshi == 17 && this.data.unit[44].value == 0 && this.data.unit[45].value == 0">恒湿已开启</span>
                        <span class="humi_tishi" v-if="this.switch == 1 && this.moshi == 17 && this.data.unit[44].value == 1 && this.data.unit[38].value == 0">正在加湿（恒湿）</span>
                        <span class="humi_tishi" v-if="this.switch == 1 && this.moshi == 17 && this.data.unit[44].value == 1 && this.data.unit[38].value == 1">湿膜净化（恒湿）</span>
                        <span class="humi_tishi" v-if="this.switch == 1 && this.moshi == 17 && this.data.unit[45].value == 1 && this.data.unit[48].value == 0">正在除湿（恒湿）</span>
                        <span class="humi_tishi" v-if="this.switch == 1 && this.moshi == 17 && this.data.unit[45].value == 1 && this.data.unit[48].value == 1">正在除霜（恒湿）</span>
                    </div>
                    <div class="humi_center_lw">
                        <svg class="icon" aria-hidden="true"  @click="systemModel()">
                            <use xlink:href="#icon-shezhi01"></use>
                        </svg>
                    </div>
                  </div>
                </el-card>
              </el-col>
              <el-col :span="8" class="paddCol">
                <el-card class="box-card">
                  <div class="leftDiv">
                    <div class="cleanBoxPan cleanBoxPan_shui">
                      <div @click="paishui()">
                         <!-- 水位 -->
                        <img src="../../assets/120a/water90.png" alt="" v-if="this.data.unit[5].value>90">
                        <img src="../../assets/120a/water70.png" alt="" v-if="this.data.unit[5].value>70&&this.data.unit[5].value<=90">
                        <img src="../../assets/120a/water60.png" alt="" v-if="this.data.unit[5].value>60&&this.data.unit[5].value<=70">
                        <img src="../../assets/120a/water40.png" alt="" v-if="this.data.unit[5].value>40&&this.data.unit[5].value<=60">
                        <img src="../../assets/120a/water30.png" alt="" v-if="this.data.unit[5].value>10&&this.data.unit[5].value<=40">
                        <img src="../../assets/120a/water10.png" alt="" v-if="this.data.unit[5].value<=10">
                        <p class="cleanBoxPan_data">{{this.data.unit[5].value}}</p>
                      </div>
                      <div class="humi_shui_kong">
                        <!-- 进水 -->
                        <div :class="this.data.unit[43].value == 0 ? 'humi_sk':'humi_sk humi_sk_ing'">
                            <div class="humi_sk_icon">
                                <svg class="icon" aria-hidden="true" v-if="this.data.unit[43].value == 0">
                                    <use xlink:href="#icon-chushui"></use>
                                </svg>
                                <svg class="icon" aria-hidden="true" v-if="this.data.unit[43].value == 1">
                                    <use xlink:href="#icon-chushui-copy"></use>
                                </svg>
                            </div>
                            <p>进水状态</p>
                        </div>
                        <!-- 风速 -->
                        <div class="humi_sk">
                            <div class="humi_sk_icon humi_sk_iconf">
                                <!-- 低速 -->
                                <svg class="icon" aria-hidden="true" v-if="this.speed == 1">
                                    <use xlink:href="#icon-fengsu"></use>
                                </svg>
                                <!-- 中速 -->
                                <svg class="icon" aria-hidden="true" v-if="this.speed == 2">
                                    <use xlink:href="#icon-fengsu2z"></use>
                                </svg>
                                <!-- 高速 -->
                                <svg class="icon" aria-hidden="true" v-if="this.speed == 0">
                                    <use xlink:href="#icon-fengsu1"></use>
                                </svg>
                            </div>
                            <p>风速</p>
                        </div>
                        <!-- 排水 -->
                        <div :class="this.data.unit[49].value == 0 ? 'humi_sk':'humi_sk humi_sk_ing'">
                            <div class="humi_sk_icon">
                               <svg class="icon" aria-hidden="true" v-if="this.data.unit[49].value == 0">
                                    <use xlink:href="#icon-jinshui"></use>
                                </svg> 
                                <svg class="icon" aria-hidden="true" v-if="this.data.unit[49].value == 1">
                                    <use xlink:href="#icon-jinshui-copy"></use>
                                </svg> 
                            </div>
                            <p>排水状态</p>
                        </div>
                      </div>
                      <!-- 工作状态 -->
                      <div class="humi_work_div">
                        <div class="humi_work">
                            <div :class="this.data.unit[51].value == 0 ? 'humi_work_mode':'humi_work_mode humi_work_mode_warning'">
                                <div class="humi_work_icon">
                                    <svg class="icon icon_gz" aria-hidden="true">
                                        <use xlink:href="#icon-simqiaguzhang"></use>
                                    </svg>
                                </div>
                                <p>压缩机故障</p>
                            </div>
                            <div  :class="this.data.unit[46].value == 0 ? 'humi_work_mode':'humi_work_mode humi_work_mode_warning2'">
                                <div class="humi_work_icon">
                                    <svg class="icon icon_yl" aria-hidden="true" v-if="this.data.unit[46].value == 0">
                                        <use xlink:href="#icon-safe"></use>
                                    </svg>
                                    <svg class="icon icon_yl" aria-hidden="true"  v-if="this.data.unit[46].value != 0">
                                        <use xlink:href="#icon-safe-copy"></use>
                                    </svg>
                                </div>
                
                                <p>压力释放</p>
                            </div>
                        </div>
                        <div class="humi_work">
                            <div :class="this.data.unit[45].value == 1 ? 'humi_work_mode humi_work_mode_work':'humi_work_mode'">
                                <div class="humi_work_icon">
                                    <svg class="icon icon_gz2" aria-hidden="true">
                                        <use xlink:href="#icon-fadongjideng"></use>
                                    </svg>
                                </div>
                                <p>压缩机工作</p>
                            </div>
                            <div :class="this.data.unit[54].value == 0 ? 'humi_work_mode':'humi_work_mode humi_work_mode_warning'">
                                <div class="humi_work_icon">
                                    <svg class="icon icon_ls" aria-hidden="true">
                                        <use xlink:href="#icon-paishui"></use>
                                    </svg>
                                </div>
                                <p>漏水报警</p>
                            </div>
                        </div>
                      </div>
                    </div>
                   
                  </div>
                </el-card>
              </el-col>
            </el-row>
            <div class="kongzhi">
                <div :class="this.switch == 0 ?'control':'control kzButton1'" @click="switchOpen(24,0)">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-guanji"></use>
                    </svg>
                    <span class="kongzhi_zi" v-if="this.switch == 1">开机</span>
                    <span class="kongzhi_zi" v-if="this.switch == 0">关机</span>
                </div>
                <div :class="(this.speed == 1 && this.switch == 1) ?'control kzButton1':'control'" @click="switchOpen(27,1)">
                    <svg class="icon jinghua" aria-hidden="true">
                    <use xlink:href="#icon-fengsu"></use>
                    </svg>
                    <span class="kongzhi_zi">低速</span> 
                </div>
                <div :class="(this.speed == 2 && this.switch == 1) ?'control kzButton1':'control'" @click="switchOpen(27,2)">
                    <svg class="icon jinghua" aria-hidden="true">
                    <use xlink:href="#icon-fengsu2z"></use>
                    </svg>
                    <span class="kongzhi_zi">中速</span> 
                </div>
                <div :class="(this.speed == 0 && this.switch == 1) ?'control kzButton1':'control'" @click="switchOpen(27,0)">
                    <svg class="icon jinghua" aria-hidden="true">
                    <use xlink:href="#icon-fengsu1"></use>
                    </svg>
                    <span class="kongzhi_zi">高速</span> 
                </div>
            </div>
         
      <!-- 设置弹框 -->
    <el-dialog
      title="系统设置"
      :append-to-body="true"
      :visible.sync="dialogVisible"
      @close='closeDialog'
      width="60%"
      >
      <el-tabs type="card">
        <el-tab-pane label="参数设置">
          <div class="system_all system_parameter">
            <div style="display:flex">
              <div class="system_lora_left">
                <div class="modular">
                  <p class="modular_title">{{this.data.unit[6].name}}：</p>
                  <span>{{this.data.unit[6].value}}</span>
                  <span class="modular_remarks">{{this.data.unit[6].flag}}</span>
                </div>
                <div class="modular">
                  <p class="modular_title">{{this.data.unit[7].name}}：</p>
                  <span>{{this.data.unit[7].value}}</span>
                  <span class="modular_remarks">{{this.data.unit[7].flag}}</span>
                </div>
              </div>
              <div class="system_lora_right">
                <div class="modular">
                  <p class="modular_title">{{this.data.unit[8].name}}：</p>
                  <span>{{this.data.unit[8].value}}</span>
                  <span class="modular_remarks">{{this.data.unit[8].flag}}</span>
                </div>
                <div class="modular">
                  <p class="modular_title">{{this.data.unit[9].name}}：</p>
                  <span>{{this.data.unit[9].value}}</span>
                  <span class="modular_remarks">{{this.data.unit[9].flag}}</span>
                </div>
              </div>
            </div>
            <div style="display:flex;margin-top:10px">
              <div class="modular">
                <p class="modular_title">湿度设定：</p>
                <el-input type="number" oninput="if(value>1000)value=1000;if(value<0)value=0" v-model="parameter.set" class="modular_input"></el-input>
                <span class="modular_remarks">%RH</span>
                <span class="system_parameter_button">
                  <el-button type="primary" @click="savePM()">确 定</el-button>
                </span>
              </div>
              <div class="modular">
                <!-- <p class="modular_title">版本号：</p> -->
                <!-- <span>{{this.banben1}}</span>-<span>{{this.banben2}}</span>-<span>{{this.banben3}}</span> -->
              </div>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>
    <!-- 排水确认弹框 -->
    <el-form class="ip_xg">
      <el-dialog
        :append-to-body="true"
        title="强制排水"
        :visible.sync="openwater"
        width="400px"
        :before-close="humiWaterClose"
        :close-on-click-modal="false"
        style="    transform: scale(1)"
      >
      <div class="item" style="height:65px;line-height: 35px;">

          <p style="color:#fff">确认开始排水？</p>
            <el-button type="primary" @click="humiWater(1)" class="humiIp sethumibut2">确定</el-button>
      </div>
      </el-dialog>
    </el-form>

    <!-- 排水弹框 -->
    <el-form class="ip_xg">
      <el-dialog
        :append-to-body="true"
        title="排水功能"
        :visible.sync="openpaishui"
        width="400px"
        :before-close="humiPaishuiClose"
        :close-on-click-modal="false"
        style="    transform: scale(1)"
      >
      <div class="item" style="height:80px">
        <p style="margin-bottom: 15px;color:#fff">当前水位：{{this.data.unit[5].value}}%</p>
          
          <el-button type="primary" @click="openWater()" :class="this.waterZi == '强制排水' ? 'sethumibut paishuiBut':'paishuiBut'">
            <!-- {{this.waterZi}} -->开始排水
          </el-button>
          <el-button type="primary" @click="humiWater(0)" style="margin-left:25px" :class="this.waterZi == '停止排水' ? 'sethumibut paishuiBut':'paishuiBut'">
            <!-- {{this.waterZi}} -->停止排水
          </el-button>
      </div>
      </el-dialog>
    </el-form>

    <!-- 排水到30之后的确认弹框 -->
    <el-form class="ip_xg">
      <el-dialog
        :append-to-body="true"
        title="强制排水"
        :visible.sync="waterThreeOpen"
        width="400px"
        :before-close="waterThreeClose"
        :close-on-click-modal="false"
        style="    transform: scale(1)"
      >
      <div class="item" style="height:90px">

          <p style="margin-bottom: 30px;margin-top: 10px;color:#fff">水位已排到{{this.data.unit[5].value}}%，是否继续排水？</p>
          <el-button type="primary" @click="waterCloseTem(1)" class="humiIp sethumibut2">停止排水</el-button>
          <el-button type="primary" @click="waterThreeCloseq()" class="humiIp sethumibut2" style="margin-right: 20px;">继续排水</el-button>
            

      </div>
      </el-dialog>
    </el-form>
    </div>
  </template>
  
  <script>
  export default {
    props: ["msg"],
    data() {
      return {
        devlist:'',
        data: "", //当前设备数据
        dataor:1,//判断接口是否成功，1表示有返回成功，0表示失败，3之内无返回就置0表示失败
        serial:'',
        timeGetData:'',//接口方法的定时器
        open:0,//设备配置的开启
        stopReceive:0,//收到的内容不往缓存放的标志
        suspend:0,//点击操作后直到完成该操作的标志
        switch:0,
        top:0,
        speed:0,
        dialogVisible: false,//设置页弹出框
        topPan:0,//上柜表盘
        downPan:0,//下柜表盘
        moshi:0,//当前模式
        radio2:'0',//定时设置的当前选择（暂时储存）
        editableTabsValue2:'0',//定时设置的当前展示页选择
        timecard:'0',//定时设置当前实际的选择
        parameter:{//参数设置
            set:'',//设定值
        },
        //天
        startTime1: "",
        endTime1: "",
        startTime2: "",
        endTime2: "",
        startTime3: "",
        endTime3: "",
        //周
        startTime1_1: "",
        endTime1_1: "",
        startTime2_1: "",
        endTime2_1: "",
        startTime3_1: "",
        endTime3_1: "",
        setdayauto: "",
        activeNames: ["1"],
        radio3: "0",
        choiceWeek: "0",
        chooseDay: [],
        dayArr: "",
        weekArr: "",
        dayArr2:"",
        newArr:'',
        // 加水
        addWater:"0",
        //当前排水状态
        openwater: false,
        waterZi:'停止排水',
        waterHide:2,
        waterValue2:0,
        //排水弹框
        openpaishui:false,
        //排水状态过程  1为正在排水 2为未排水  （水量低于30时判断用）
        threeWater:0,
        waterThreeOpen:false,
        //30之后的排水记时
        waterThreeTime:0,
        //30之后判断在计时之内点击停止排水等操作，状态置为初始，以实现在下一次点击排水后进行30的提示
        warterchu:0,
      };
    },
    computed: {
    },
    created() {
      this.data = JSON.parse(localStorage.getItem("menuDataJson"))
      this.data.unit[0].name = "送风温度"
      this.data.unit[1].name = "送风湿度"
      this.data.unit[2].name = "回风温度"
      this.data.unit[2].flag = "℃"
      this.data.unit[3].name = "回风湿度"
      this.data.unit[3].flag = "%RH"
      this.data.unit[4].name = "当前湿度"
      this.data.unit[4].flag = "%RH"
      //执行定时器进行接口循环
      this.getDataStart()
    },
    methods: {
        //禁止软键盘弹出
        forbid(){
            //禁止软键盘弹出
            document.activeElement.blur();
        },
        //暂停走接口
        getDataStop(){
            this.stopReceive = 1
            clearInterval(this.timeGetData);
            this.timeGetData = null;
        },
        //重新定时走接口
        getDataStart(){
            this.$nextTick(() => {
                this.timeGetData = setInterval(() => {
                    this.stopReceive = 0
                    if(this.dataor == 0){ //接口失败提示
                      this.$message({
                        message: '服务器访问失败',
                        type: 'error',
                        duration: 1000
                      });
                    }
                    this.getData(JSON.parse(localStorage.getItem("当前设备编号")))
                    this.dataor = 0
                }, 3000); 
            })
        },
        // 数据对接
        getData(info){
          this.devlist = info
          if(info.uid == null || info.uid == "null"){//清空缓存第一次进入时找不到info.uid，页面为空页面的处理
            info.uid = 0
          }
          var params = {
              "getdevinfo":[
                {
                  "uid": info.uid,
                  "type": info.type,
                  "addr": info.addr,
                  "unittype":"id-name-ready-value-flag-max-min"
                }
              ],
          }
          this.$http.post(this.$baseUrl, params).then((res) => {
            this.dataor = 1// 接口成功置1
            if(res.data.getdevinfo == undefined){ //数据返回不全失败提示
              this.$message({
                message: '服务器访问失败',
                type: 'error',
                duration: 1000
              });
            }else{}
              localStorage.setItem("当前设备状态", res.data.getdevinfo[0].alarmstate);
              // 参数设置回显
              this.parameter.set = res.data.getdevinfo[0].unit[34].value //设定值
              if(this.stopReceive == 0){
                  this.data = res.data.getdevinfo[0];
                  this.switch = res.data.getdevinfo[0].unit[24].value != 0 ? 1 : 0  //开关机
                  this.speed = res.data.getdevinfo[0].unit[27].value  //高低速
                  this.moshi = res.data.getdevinfo[0].unit[24].value
                  this.addWater = res.data.getdevinfo[0].unit[25].value.toString()
                  
              }
              //排水状态下水量在小于30的时候，进行判断和提示
              if(res.data.getdevinfo[0].unit[5].value <= 30){
                // console.log('30以下的排水状态'+this.threeWater+',时间：'+this.waterThreeTime)
                if(this.threeWater == 1){//排水状态过程开启下
                // console.log(this.waterThreeTime)
                  if (this.waterThreeTime == 0 || this.warterchu == 0) {//计时为0时走1次
                      this.waterCloseTem(0)//关闭排水，但不关闭排水状态
                      this.waterThreeOpenq()  //打开提示框(计时)
                  }
                }
              }
              //无操作下，排水的状态
              if(this.waterHide == 2){
                if(res.data.getdevinfo[0].unit[28].value == 0){
                  this.waterZi = '停止排水'
                }else{
                  this.waterZi = '强制排水'
                }
              }
              //判断排水操作是否下发完成
              if(this.waterValue2 == res.data.getdevinfo[0].unit[28].value){
                this.waterHide = 2
                if(res.data.getdevinfo[0].unit[28].value == 0){
                  this.waterZi = '停止排水'
                }else{
                  this.waterZi = '强制排水'
                }
              }
          });
        },
        // 开关机修改
     switchOpen(id,val){
        if(this.suspend == 1){
          this.$message("操作频繁，请稍后操作");
          return false
        }else{
          var st;
          this.getDataStop();
          if(id == 24){//开关机值判断
            if(val == 0){
                if(this.switch == 0){
                    st = 17 // 恒湿
                    this.switch = 1
                }else{
                    st = 0
                    this.switch = st
                }
            }else if(val == 24 || val == 20 || val == 18){
              if(this.switch == 0){
                this.$message("设备未开机，请开机后操作");
                return false
              }else if(this.switch == 1){
                st = val
                this.moshi = val
              }
            }else if(val == 768){
                if(this.butDissable == 0){
                  st = 272
                  this.moshi = 272
                }else if(this.butDissable == 1){
                  st = 528
                  this.moshi = 528
                }
            }
            
          }else if(id == 27 && this.switch == 1){//风速判断
            if(val == 0){
                st = 0
            }else if(val == 1){
                st = 1
            }else if(val == 2){
                st = 2
            }else{
                return false
            }
            this.speed = st
          }else{
            return false
          }
          this.suspend = 1
          var params = {
              "setdevinfo":[
                  {
                      "uid": this.devlist.uid,
                      "type": this.devlist.type,
                      "addr": this.devlist.addr,
                      "unit":[
                        {
                          id:id,
                          value:st
                        }
                      ]
                  }
              ],
              [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
          }
          this.$http.post(this.$baseUrl,params).then((res)=>{
            this.suspend = 0
            this.data.unit[id].value = st
            this.getDataStart()
          })
        }
        
     },
        // 弹出框
        systemModel() {
            this.getDataStop()//暂停走接口
            this.dialogVisible = true
        },
        //关闭弹框的事件
        closeDialog(){
            this.getDataStart()
        },
        //设定值保存
        savePM(){
            var params = {
                "setdevinfo":[
                    {
                        "uid": this.devlist.uid,
                        "type": this.devlist.type,
                        "addr": this.devlist.addr,
                        "unit":[
                          {
                            id:34,
                            value:parseInt(this.parameter.set)
                          }
                        ]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl,params).then((res)=>{
                this.suspend = 0
                this.getData(JSON.parse(localStorage.getItem("当前设备编号")))
                this.$notify({
                  title: '保存成功',
                  type: 'success',
                  duration: 1500
                });
            })
        },
        //排水弹框控制
        openWater(val){
          this.openwater = true
        },
        humiWaterClose(){
          this.openwater = false
        },
        //强制排水
        humiWater(val){
          var serialb = JSON.parse(localStorage.getItem("当前设备编号"))
          if(this.butswitch == 0){
            this.$message("关机状态下无法操作");
            return false
          }else if(this.waterHide == 1){
            this.$message("正在执行，请勿频繁操作");
            return false
          }else{
            var params = {
                "setdevinfo":[
                    {
                        "uid": this.devlist.uid,
                        "type": this.devlist.type,
                        "addr": this.devlist.addr,
                        "unit":[
                          {
                            id:28,
                            value:val
                          }
                        ]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
            this.$http.post(this.$baseUrl, params).then(res => {
              this.data.unit[28].value = val
                this.waterValue2 = val
                this.waterHide = 1
                if(val == 0){
                  this.waterZi = '停止排水'
                  this.threeWater = 0 //关闭排水，并且关闭排水过程
                  this.warterchu = 0
                }else{
                  this.waterZi = '强制排水'
                  this.threeWater = 1 //开启排水，并且开启排水过程
                }
                this.openwater = false
              });
          }
          
          
        },
        //排水弹框
        paishui(){
          this.openpaishui = true
        },
        humiPaishuiClose(){
          this.openpaishui = false
        },
        //30之后提示通知关闭排水（val=0下发关闭排水状态，但是排水状态过程不关闭 val=1下发关闭排水状态，排水状态过程关闭）
        waterCloseTem(val){
          var params = {
                "setdevinfo":[
                    {
                        "uid": this.devlist.uid,
                        "type": this.devlist.type,
                        "addr": this.devlist.addr,
                        "unit":[
                          {
                            id:28,
                            value:0
                          }
                        ]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
          this.$http
              .post(this.$baseUrl, params)
              .then(res => {
                this.data.unit[28].value = 0
                this.waterValue2 = 0
                this.waterHide = 1
                this.waterZi = '停止排水'
                
                if(val == 0){
                }else{
                  this.threeWater = 0 //关闭排水，并且关闭排水过程
                  this.waterThreeOpen = false //关闭水量低于30时的弹框
                  this.warterchu = 0
                }
                
              });
        },
        //30之后的排水提示开启
        waterThreeOpenq(){
          this.waterThreeOpen = true  //打开提示框
          this.warterchu = 1
          this.waterThreeTime = 0
          var timer = setInterval(() => {
            if(this.waterThreeTime >= 900){//计时大于10后关闭相关状态和弹框，并且下发停止排水
              // console.log(this.waterThreeTime)
              this.waterThreeTime = 0
              this.threeWater = 0
              this.waterThreeOpen = false  //关闭提示框（关闭排水，关闭排水状态）
              clearInterval(timer);
            }else{
              // console.log(this.waterThreeTime)
              this.waterThreeTime++
            }
            if(this.warterchu == 0){
              // console.log('停止')
              clearInterval(timer);
            }
          }, 1000);
        },
        //30之后的排水提示关闭
        waterThreeClose(){
          this.waterThreeOpen = false
          this.threeWater = 0
          this.waterCloseTem(1)
        },
        //30之后关闭排水接口下发
        waterThreeCloseq(){
          var params = {
                "setdevinfo":[
                    {
                        "uid": this.devlist.uid,
                        "type": this.devlist.type,
                        "addr": this.devlist.addr,
                        "unit":[
                          {
                            id:28,
                            value:1
                          }
                        ]
                    }
                ],
                [localStorage.getItem("cookieName")]:localStorage.getItem("_token")
            }
          this.$http
              .post(this.$baseUrl, params)
              .then(res => {
                this.data.unit[28].value = 1
                this.waterValue2 = 1
                this.waterZi = '强制排水'
                this.threeWater = 0 //开启排水，并且关掉排水过程
                this.waterThreeOpen = false//关掉30后的排水提示
                this.warterchu = 1

              });
        },
    },
    
     // 清除定时器
      beforeDestroy() {
          clearInterval(this.timeGetData);
          this.timeGetData = null;
      },
  };
  </script>
  
  <style scoped>
  .el-card {
    background: none;
    color: #fff;
    border: 1px solid rgba(89, 129, 165, 0.4);
  }
  /deep/ .el-card__header {
    background: rgba(89, 129, 165, 0.2);
  
    border-bottom: none;
  }
  .box-card {
    border-radius: 0px;
  }
  /* 整体框架 */
  .paddCol{
    padding: 0px !important;
    margin: 0px !important;
  }
  .cardTitle .el-card__body{
    padding: 0px !important;
  }
  .leftDiv{
    height: 540px;
  }
  /* 两侧表盘样式 */
  .cleanBoxPan{
    text-align: center;
    height: 330px;
    padding-top: 20px;
  }
  .cleanBoxPan_data{
    position: relative;
    bottom: 108px;
    font-size: 25px;
  }
  .cleanBoxPan_data2{
    position: relative;
    bottom: 108px;
    font-size: 30px;
  }
  .cleanBoxPan_tit2{
    position: relative;
    bottom: 10px;
    font-size: 20px;
  }
  
  /* .cleanBoxPan_tishi{
    text-align: center;
    font-size: 25px;
    margin-top: 20px;
    position: relative;
    top: 15px;
    height: 25px;
  } */
  .cleanBoxPan_shui{
    padding-top: 70px;
    height: 370px;
  }
  /* 右侧水位风速样式 */
  .humi_shui_kong{
    display: flex;
  }
  .humi_sk{
    flex: 1;
    color: #fff;
    align-items: center;
  }
  .humi_sk_ing{
    color: #00fff6;
  }
  .humi_sk p{
    margin-top: 10px;
  }
  .humi_sk_icon{
    height: 60px;
    position: relative;
  }
  .humi_sk_icon .icon{
    font-size: 40px;
    margin: auto;
    left: 0;
    right: 0;
    position: absolute;
    bottom: 0;
  }
  .humi_sk_iconf .icon{
    font-size: 60px;
  }
  /* 两侧数据样式 */
  .cleanBoxData_left{
    display: flex;
    margin-top: 50px;
    margin-left: 40px;
  }
  .cleanBoxData_tit{
    width: 100px;
    text-align: right;
    font-size: 22px;
    position: relative;
    top: -2px;
    overflow: hidden;
  }
  .cleanBoxData_data{
    width: 180px;
    color: #19f4ff;
    font-size: 25px;
    position: relative;
    top: -4px;
    text-align: center;
    overflow: hidden;
  }
  .cleanBoxData_flag{
    width: 90px;
    font-size: 18px;
    color: #cfcfcfee;
    position: relative;
      top: -1px;
    overflow: hidden;
  }
  /* 右侧工作状态样式 */
  .humi_work_div{
    margin-top: 30px;
    margin-right: 15px;
  }
  .humi_work{
    display: flex;
    height: 60px;
    align-items: center;
    font-size: 20px;
  }
  .humi_work_mode{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .humi_work_mode_work{
    color: yellowgreen;
  }
  .humi_work_mode_warning{
    color: red;
  }
  .humi_work_mode_warning2{
  color: #f7ca4c;
}
  .humi_work_icon{
    width: 70px;
  }
  .humi_work_icon .icon{
    font-size: 30px;
  }
  .humi_work_icon .icon_yl{
    font-size: 35px;
  }
  .humi_work_icon .icon_gz2{
    font-size: 45px;
  }
  /* 中间模块样式 */
  .centerH{
    height: 542px;
  }
  /* 时间版本 */
  .shijian{
    float: left;
    position: relative;
    top: 2px;
    height: 20px;
  }
  .banben{
    float: right;
    font-size: 15px;
  }
  .timeG{
    position: relative;
    top: -3px;
    margin: 0px 5px;
  }
  /* 产品图片样式 */
  .boxImg{
    height: 430px;
    padding-top: 20px;
    text-align: center;
  }
  .boxImg img{
    height: 100%;
  }
  /* 中间底部控制文字样式 */
  .humi_center_div{
    display: flex;
    height: 100px;
    align-items: center;
    padding: 0px 10px 0px 15px;
  }
  .humi_center_lw{
    width: 10%;
    cursor: pointer;
  }
  .humi_center_lw .icon{
    font-size: 35px;
  }
  .humi_center_tishi{
    width: 80%;
    text-align: center;
  }
  .humi_center_tishi .humi_tishi{
  font-weight: bold;
  padding-left: 0px;
  font-size: 26px;
        background:-webkit-linear-gradient(left,#0ff,#a0a0a0 25%,#0ff 50%,#a0a0a0 75%,#0ff);
            color:transparent;
            -webkit-background-clip:text;
            background-size:200% 100%;
            animation:masked-animation 1s infinite linear
}
@-webkit-keyframes masked-animation {
            0% {
                background-position:0 0;
            }
            100% {
                background-position:-100% 0;
            }
        }

  /deep/ .el-dialog__header .el-dialog__title{
    color: #Fff !important;
  }
  /deep/ .el-dialog__body{
    color: #fff;
    padding-top: 20px;
  }
  /deep/ .el-form-item__label{
    color: #fff;
  }
  /deep/ .el-input__inner{
      background: rgba(255, 255, 255, 0);
      border: 1px solid rgba(255, 255, 255, 0.3);
      color: #fff;
      padding: 5px;
  }
  /* 底部按钮样式设置 */
  .kongzhi{
    display: flex;
  }
  .control{
    height: 100px;
    flex: 1;
    border:1px solid rgba(89, 129, 165, 0.6) !important;
    line-height: 100px;
    text-align: center;
    font-size: 28px;
    cursor: pointer;
  }
  .kzButton1{
    background:rgba(89, 129, 165, 0.6) !important;
    border:1px solid rgba(89, 129, 165, 0.6) !important;
  }
  .jinghua{
    font-size: 32px;
    position: relative;
    top: 3px;
  }
  .kongzhi_zi{
    font-size: 23px;
    letter-spacing: 2px;
  }
  /* 通讯板卡设置样式 */
.system_all{
  margin-left: 10px;
  font-size: 16px;
}
/* 选项卡的样式 */
.board{
  display: flex;
  justify-content: flex-end;
  border-bottom: 1px solid #7090b7;
}
.board_div{
  display: flex;
  width: 130px;
  height: 50px;
  text-align: right;
}
.board_div_title{
  margin-right: 10px;
  padding: 0 10px;
  line-height: 19px;
  line-height: 50px;
  width: 85px;
  text-align: center;
  cursor: pointer;
}
.board_div_title_active{
  border-bottom: 2px solid #8abcef;
}
.board_div .el-radio{
  line-height: 50px;
}
/deep/ .board_div .el-radio__inner{
  width: 16px !important;
  height: 16px !important;
}
/deep/ .board_div .el-radio__inner::after{
  width: 6px;
  height: 6px;
}
.dialog-footer{
  float: right;
  margin-right: 20px;
  margin-bottom: 20px;
}
.modular{
  display: flex;
  align-items:center;
  margin-bottom: 15px;
  min-height: 40px;
}
.modular_title{
  width: 100px;
  text-align: right;
  margin-right: 10px;
}
.modular_input{
  width: 100px;
}
.modular_remarks{
  color: rgb(214, 214, 214);
  margin-left: 10px;
}
/deep/ input::-webkit-outer-spin-button,
/deep/ input::-webkit-inner-spin-button {
  -webkit-appearance: none!important;
}
/deep/ input[type="number"]{
  -moz-appearance: textfield;
}
.system{
  margin-left: 10px;
}
.system_all_ip{
  flex: 1;
}
/* 参数设置页面 */
.system_parameter{
  margin-top: 10px;
}
.system_lora_left{
  width: 47%;
}
.system_lora_right{
  width: 50%;
}
.system_parameter .modular_title{
  width: 150px;
}
.system_parameter_span{
  margin: 0px 8px;
}
.system_parameter_button{
  margin-left: 30px;
}
.system_parameter_set{
  width: 100%;
  text-align: right;
  font-size: 25px;
  padding-right: 20px;
  padding-bottom: 10px;
}
/deep/ .el-input.is-disabled .el-input__inner{
  background-color: #5b7592 !important;
  border: 1px solid rgba(255, 255, 255, 0.3);;
}
  /* 定时设置页面 */
/deep/ .el-input__prefix{
  left: auto;
}
.el-date-editor.el-input, .el-date-editor.el-input__inner{
  margin:0px 20px;
}
.system_time{
  padding-left: 40px;
  margin: 20px 0px;
}
/deep/ .el-radio__label{
  color: #fff;
}
/deep/ .system .el-radio{
  margin-top: 20px;
}
.system_zhou{
  margin-left: 20px;
}
/* 加水选择界面 */
.humi120a_addshui{
    width: 90%;
    margin: 40px auto;
    padding-bottom: 30px;
    border-bottom: 1px dashed #b7b5b5;
    text-align: center;
    font-size: 18px;
}
/deep/ .humi120a_addshui .el-radio__label{
    font-size: 18px;
}
.h120a_addsts{
    margin-top: 30px;
}
.humi120a_kong{
    width: 500px;
    height: 165px;
    margin: 0 auto;
    margin-bottom: 30px;
    padding-top: 10px;
    position: relative;
    
}
.humi120a_kong_div{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.humi120a_kong_div div{
    width: 200px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    border: 1px solid;
    margin: 10px 0px;
    cursor: pointer;
}
.humi120a_conter{
    background: #3c526699;
}
.humi120a_kong_tit{
    position: absolute;
    top: 0px;
    left: -100px;
}
  /* 标题 */
  .clearfix{
    height: 55px;
    background: rgba(89, 129, 165, 0.2);
    padding: 20px;
    border: 1px solid rgba(89, 129, 165, 0.4);
  }
  /* 设置标题框架样式 */
  /deep/ .el-tabs__item{
    font-size: 17px !important;
  }
  /deep/ .el-tabs--card>.el-tabs__header{
    background-color: #6a90b8;
  }
  /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
      border-bottom: 1px solid rgb(78 107 135);
      background: rgb(60 82 102 / 60%);
      color: #fff;
  }
  /deep/ .el-tabs__header{
    margin: 0px;
  }
  /deep/ .el-tabs__content{
    border: 1px solid #7c8ea4;
    border-top: none;
    background-color: #5b7592;
  }
  /* 排水弹框 */
  .paishuiBut{
    width: 150px;
    margin-left: 15px;
    margin-top: 5px;
  }
  .shuitongpaishui{
    float: left;
    width: 150px;
    height: 150px;
  }
  .shican{
      width: 100px;
      font-size: 35px;
      position: relative;
      right: -80px;
      top: 8px;
      text-align: right;
      border: 1px solid #000;
      background: none;
      color: #000;
      outline: none;
  }
  /* 排水框样式 */
  /deep/ .el-dialog__header{
      background: rgba(0, 0, 0, 0.2);
  }

  /deep/ .el-dialog__title{
      color: #fff;
  }
  .item{
    text-align: center;
  }
  </style>